<template>
    <div class="nape">
        <div class="header">
            <img src="../../assets/img/report/report-bg.png" alt="">
            <div class="title">
                <h4>{{tableData.studentName}}</h4>
                <p>{{tableData.examModelName}}</p>
            </div>
        </div>
        <!-- <div class="main"> -->
            <div class="list">
                <h4>
                    <span>01</span>总体概况
                </h4>
                <table class="table">
                    <tr>
                        <td>姓名</td>
                        <td>{{tableData.studentName}}</td>
                    </tr>
                    <tr>
                        <td>年级</td>
                        <td>{{tableData.sectionName}}</td>
                    </tr>
                    <tr>
                        <td>班级</td>
                        <td>{{tableData.lessonClassName}}</td>
                    </tr>
                    <tr>
                        <td>校区</td>
                        <td>{{tableData.schoolName}}</td>
                    </tr>
                    <tr>
                        <td>科目</td>
                        <td>{{tableData.subjectName}}</td>
                    </tr>
                    <tr>
                        <td>得分</td>
                        <td>{{tableData.getScore}}</td>
                    </tr>
                    <tr>
                        <td>满分</td>
                        <td>{{tableData.modelScore}}</td>
                    </tr>
                     <tr>
                        <td>班平均分</td>
                        <td>{{tableData.classAvgScore}}</td>
                    </tr>
                     <tr>
                        <td>校区平均分</td>
                        <td>{{tableData.schoolAvgScore}}</td>
                    </tr>
                    <tr>
                        <td>总平均分</td>
                        <td>{{tableData.modelAvgScore}}</td>
                    </tr>
                    <!-- <tr class="red">
                        <td>总排名</td>
                        <td>{{tableData.modelAvgRank}}</td>
                    </tr> -->

                    <!-- <tr class="red">
                        <td>校区排名</td>
                        <td>{{tableData.schoolAvgRank}}</td>
                    </tr> -->
                </table>
                <!-- <div class="next-div"> -->
                <next />
            <div class="footer">
                <logo />
            </div>
                <!-- </div> -->

            </div>
             <!-- <loading ref="loading" /> -->
        <loading ref="loading" />
        <!-- <loading ref="loading" /> -->
    </div>
</template>
<script>
import Logo from '../common/Logo.vue'
import Next from '../common/Next.vue'
import Loading from '../common/loading'

import io from '../../lib/io'
import util from '../../lib/util'

export default {
    components: {
        Logo,
        Next,
        Loading
    },
    // props:['reportId','sysCode'],

    data() {
        return {
            reportId:"",
            sysCode:"",
            tableData:{},
        }
    },
    watch:{

    },
    created(){
        this.reportId = this.$route.query.reportId
        this.sysCode = util.getSysCode(this.$route.query.areamTeamId)


    },
    mounted(){
        this.reportInfo()
    },
    methods:{
        reportInfo(){
            if(this.$refs.loading){
                this.$refs.loading.show = true
            }
            let param = {
                reportId:this.reportId,
                sysCode:this.sysCode,
            }
            io.post(io.reportInfo,param,(ret)=>{
                if(ret.success){
                    this.tableData = ret.data
                    this.$emit('getInfo',this.tableData)
                    if(this.$refs.loading){
                        this.$refs.loading.show = false
                    }
                }else{
                    alert(ret.desc)
                }
                // console.log(ret)
            })
        }
    }

}
</script>
<style lang="less" scoped>
.nape {
    width: 100%;
    background-color: #edf5ff;
    position: relative;
    .header {
        width: 100%;
        height: auto;
        position: relative;
        height:4.38rem;
        img {
            display: block;
            height:4.38rem;
            width: 100%;
        }
        .title {
            padding-left: 0.3rem;
            position: absolute;
            top: 1.15rem;
            z-index: 10;
            width: 70%;
            box-sizing: border-box;
            h4 {
                font-size: 0.4rem;
                height: 0.4rem;
                line-height: 0.4rem;
                font-family: 700;
                color: #fff;
                margin-bottom: 0.15rem;
            }
            p {
                font-size: 0.32rem;
                color: #fff;
                line-height: 0.42rem;
            }
        }
    }

        .list {
            width:90%;
            margin-left: 5%; // margin-top:-16.8rem;
            background-color: #fff;
            padding: 0.4rem 0.44rem 0.48rem;
            box-sizing: border-box;
            min-height: 73vh;
            position: absolute;
            margin-bottom: 0.6rem;
            top: 20vh;
            border-radius: 0.1rem;
            box-shadow: 0px 5px 18px 0px rgba(189, 217, 253, 0.5);
            h4 {
                height: 0.4rem;
                font-size: 0.4rem;
                line-height: 0.4rem;
                font-weight: normal;
                color: #ff7853;
                span {
                    font-size: 0.52rem;
                    height: 0.4rem;
                    line-height: 0.4rem;
                    font-weight: normal;
                    display: inline-block;
                    color: #74a5e1;
                    padding-right: 0.22rem;
                    border-right: 3px solid #74a5e1;
                    font-weight: 100;
                    float: left;
                    margin-right: 0.2rem;
                }
            }
            .table {
                margin-top: 0.3rem;
                width: 100%;
                border-radius: 13px;
                // display: flex;
                // flex-direction: column;
                // height: 50vh;
                tr {
                    width: 100%;
                    color: #333333;
                    // flex: 1;
                    display: flex;
                    align-items: center;
                    // height:1rem;
                    &.red {
                        color: #fb6e58;
                    }
                    td {
                        text-align: center;
                        flex: 1;
                        max-width: 50%;
                        font-size: 0.24rem;
                        line-height: 0.34rem;
                        padding: 0.15rem;
                    }
                }
                tr:nth-child(2n-1) {
                    background-color: #f0f7ff;
                }
            }
        }

    }
    .footer {
        width:100%;
        position: absolute;
        bottom: -0.57rem;
        left:0;

    // }
}
</style>
<style>
.swiper-slide {
    /* overflow: scroll;    */
}
</style>


